<template>
  <div>
    <div class="box chart-box intro-y">
        <div class="title text-center p-3">非市场机组总出力预测</div>
        <chart :tableData="tableData"/>
      </div>
    <!-- <div class="box intro-y grid 2xl:grid-cols-3 sm:grid-cols-1 gap-5">
      <el-button type="primary" plain
        class="absolute right-5 top-3 cursor-pointer text-primary z-50 import">导入</el-button>
      <div class="sm:col-span-1 2xl:col-span-1">
        <el-calendar v-model="selDate">
          <template #date-cell="{ data }">
            <p :class="data.isSelected ? 'is-selected' : ''">
              {{ data.day.split('-').slice(1).join('-') }}
              {{ data.isSelected ? '✔️' : '' }}
            </p>
          </template>
        </el-calendar>
      </div>
      <div class="sm:col-span-1 2xl:col-span-2">
        <div class="title text-center p-3">非市场机组总出力预测</div>
        <chart :tableData="tableData"/>
      </div>
    </div> -->
    <div class="box mt-5 border-t intro-y">
      <div class="report-chart p-3">
        <wTable :tableData="tableData" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";
import wTable from "./wTable.vue"
import chart from "./chart.vue"
import * as $api from "@/api/api.js";
import dayjs from "dayjs";

const tableData = ref([]);
const selDate = ref(new Date());

onMounted(() => {
  getDayData();
});

watch(selDate, (newVal) => {
  console.log(dayjs(newVal).format("YYYY-MM-DD"));
})

const getDayData = () => {
  $api.NonMarketOutputQueryDayData().then(res => {
    tableData.value = res;
  })
}
</script>

<style lang="scss" scoped>
.import {
  font-size: 20px;
}
.chart-box {
  height: 500px;
}
.title {
  font-size: 20px;
  color: #555555;
  font-weight: bold;
}
</style>